<template>
  <div class="booklist">
    <h2>书籍列表</h2>
    <div class="loading" v-if="loadding">数据加载中...</div>
    <ul v-if="books.length > 0">
      <li v-for="book in books" :key="book.id">
        <h2>{{ book.title }}</h2>
        <p>{{ book.price }}</p>
      </li>
    </ul>

    <button @click="getnext">下一页</button>
  </div>
</template>

<script>
export default {
  name: "Booklist",
  data() {
    return {
      loadding: false,
      books: [],
      page: {
        _page: 1,
        _limit: 2,
      },
    };
  },
  created() {
    this.getBooks();
  },
  methods: {
    getBooks() {
      this.loadding = true;
        this.axios.get("http://127.0.0.1:3000/books", {
            params:{
                ...this.page
            }
        }).then((res) => {
          console.log(res);
          this.books = res.data;
          this.loadding = false;
        });

    //   fetch("http://127.0.0.1:3000/books")
    //     .then(function (response) {
    //       return response.json();
    //     })
    //     .then(function (myJson) {
    //       console.log(myJson);
    //       this.books = myJson;
    //       this.loadding = false;
    //     });
    },
    getnext() {
      this.page._limit = 3;
      this.getBooks();
    },
  },
};
</script>

<style lang="less" scoped>
.booklist {
  background-color: bisque;
  height: 100%;
  overflow: hidden; // 触发了bfc
}
.loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 120px;
  color: #fff;
}
</style>